<template>
  <div class="note-card" @click="$emit('click')">
    <!-- 封面图片容器 -->
    <div class="cover-container">
      <img 
        :src="getSafeImageUrl(note.coverImage || note.coverImageUrl)" 
        alt="笔记封面"
        class="cover-image"
        @error="handleCoverError"
      >
    </div>
    
    <!-- 内容区域 -->
    <div class="content-wrapper">
      <!-- 标题和内容 -->
      <div class="text-content">
        <h3 class="note-title">{{ note.title || '无标题' }}</h3>
        <p class="note-desc">{{ truncateContent(note.content) }}</p>
      </div>
      
      <!-- 用户信息和时间 -->
      <div class="meta-info">
        <div class="user-info">
          <img 
            :src="getSafeImageUrl(note.user?.avatar || note.avatarUrl)" 
            alt="用户头像"
            class="user-avatar"
            @error="handleAvatarError"
          >
          <span class="username">{{ note.user?.name || note.nickname || '匿名用户' }}</span>
        </div>
        <span class="post-time">{{ formatDate(note.createdAt) }}</span>
      </div>
      
      <!-- 互动按钮 -->
      <div class="action-buttons">
        <button 
          class="action-btn like-btn"
          :class="{ 'active': note.isLiked }"
          @click.stop="$emit('like', note.id)"
          :disabled="isLiking"
        >
          <HeartIcon class="btn-icon" :fill="note.isLiked ? 'currentColor' : 'none'" />
          <span>{{ note.likes || 0 }}</span>
        </button>
        
        <button 
          class="action-btn collect-btn"
          :class="{ 'active': note.isCollected }"
          @click.stop="$emit('collect', note.id)"
          :disabled="isCollecting"
        >
          <BookmarkIcon class="btn-icon" :fill="note.isCollected ? 'currentColor' : 'none'" />
          <span>{{ note.collects || 0 }}</span>
        </button>
        
        <button class="action-btn comment-btn">
          <MessageSquareIcon class="btn-icon" />
          <span>{{ commentCount }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { HeartIcon, BookmarkIcon, MessageSquareIcon } from 'lucide-vue-next'
import { ref, computed, onMounted, watch } from 'vue'
import { useCommentStore } from '@/store/comments'

const props = defineProps({
  note: {
    type: Object,
    required: true,
    default: () => ({
      id: '',
      title: '',
      content: '',
      coverImage: '',
      coverImageUrl: '',
      user: {},
      likes: 0,
      collects: 0,
      comments: 0,
      isLiked: false,
      isCollected: false,
      createdAt: ''
    })
  },
  isLiking: Boolean,
  isCollecting: Boolean
})

const emit = defineEmits(['click', 'like', 'collect'])

const commentStore = useCommentStore()

// 使用全局评论数
const commentCount = computed(() => {
  return commentStore.getCommentCountByNoteId(props.note.id) || props.note.comments || 0
})

// 获取安全的图片URL
const getSafeImageUrl = (url) => {
  if (!url) return 'https://picsum.photos/id/24/300/200' // 默认封面图
  return url.startsWith('http') ? url : `https://${url}`
}

// 头像加载失败处理
const handleAvatarError = (e) => {
  e.target.src = 'https://picsum.photos/id/64/40/40'
}

// 封面加载失败处理
const handleCoverError = (e) => {
  e.target.src = 'https://picsum.photos/id/24/300/200'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const options = { year: 'numeric', month: 'short', day: 'numeric' }
  return new Date(dateString).toLocaleDateString(undefined, options)
}

// 截断内容
const truncateContent = (content) => {
  if (!content) return ''
  return content.length > 80 ? content.slice(0, 80) + '...' : content
}

// 组件挂载时获取评论数
onMounted(() => {
  if (props.note.id) {
    commentStore.fetchCommentCountByNoteId(props.note.id)
  }
})

// 监听笔记ID变化
watch(() => props.note.id, (newId) => {
  if (newId) {
    commentStore.fetchCommentCountByNoteId(newId)
  }
})
</script>

<style scoped>
/* 保持原有样式不变 */
.note-card {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.note-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.cover-container {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.note-card:hover .cover-image {
  transform: scale(1.05);
}

.content-wrapper {
  padding: 16px;
}

.text-content {
  margin-bottom: 16px;
}

.note-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  color: #555;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.post-time {
  color: #999;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  color: #888;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.action-btn:hover:not(:disabled) {
  background: #f5f5f5;
}

.action-btn.active {
  color: var(--color-primary);
  background: rgba(78, 84, 200, 0.1);
}

.btn-icon {
  width: 16px;
  height: 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .cover-container {
    height: 150px;
  }
  
  .content-wrapper {
    padding: 12px;
  }
  
  .action-btn {
    padding: 4px 8px;
    font-size: 12px;
  }
}
</style>